<template>
  <div  
    ref="boxRef"   
    @mouseover="handleMouseOver"
    @mouseleave="handleMouseLeave"
    class="video"  :style="rootStyle"></div>
</template>

<script setup>
import {ref,reactive,onMounted,onBeforeUpdate, onBeforeUnmount,defineProps,defineEmits} from 'vue'
import Player, {Events }from 'xgplayer'
import 'xgplayer/dist/index.min.css';


//父组件传值
const {config,defaultConfig,rootStyle} =defineProps({
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultConfig: {
      type: Object,
      default() {
        return {};
      }
    },
    rootStyle: {
      type: Object,
      default() {
        return {};
      }
    }
  })

//处理视频
let handleMouseOver=()=>{
  player.play()
}

let handleMouseLeave=()=>{
  
  player.pause()
}


//开始实例化      
let player =ref(null)
let playerOption=reactive(defaultConfig)
const  emits  = defineEmits(['playerInit']);
let initPlayer=()=> {
  // if (config.url) {
    // 合并传入配置和默认配置
    if(!config.url){config.url='http://s3hdmp00b.hn-bkt.clouddn.com/geek/RTX4070评测：迷你节能版3080.mp4'}
    playerOption = Object.assign({}, defaultConfig, config);
    player = new Player(playerOption);
    // 父组件事件，传入一个视频对象
    emits("playerInit", player);
  // }
}


onMounted(()=>{
  initPlayer();

}),
  
onBeforeUpdate(()=> {
  initPlayer();
}),
onBeforeUnmount(()=> {
  player.value &&
    typeof player.destroy === "function" &&
    player.destroy();
})

</script>

<style lang="less" >
.mse{
  width: 100%;
  height:100px;
  display: block;
}
.xgplayer-start{
  display:none !important;
}
</style>
